<ngx-loading-bar [color]="'#fafafa'"></ngx-loading-bar>

<mat-toolbar color="primary" class="mat-elevation-z6 app-navbar" [class.navbar-small]="isSmallDevice$ | async">
  <a
    mat-button
    routerLink=""
    routerLinkActive=""
    #homeLink="routerLinkActive"
    [routerLinkActiveOptions]="{ exact: true }"
  >
    <img src="https://material.angular.io/assets/img/homepage/angular-white-transparent.svg" />
    FORMLY
  </a>

  <ng-container *ngIf="isSmallDevice$ | async; else mainMenu">
    <span class="spacer" [style.flex]="'1 1 auto'"></span>
    <ng-container *ngTemplateOutlet="version"></ng-container>
    <a mat-button href="https://github.com/ngx-formly/ngx-formly">
      <img src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg" />
    </a>
    <button mat-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
  </ng-container>
  <ng-template #mainMenu>
    <a *ngFor="let link of menu" mat-button [routerLink]="link.path">{{ link.title }}</a>
    <span class="spacer" [style.flex]="'1 1 auto'"></span>

    <ng-container *ngTemplateOutlet="version"></ng-container>
    <a mat-button href="https://github.com/ngx-formly/ngx-formly">
      <img src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg" />
      GitHub
    </a>
  </ng-template>
</mat-toolbar>

<mat-sidenav-container fullscreen [style.top]="'56px'" class="mat-typography">
  <mat-sidenav
    [mode]="(isSmallDevice$ | async) ? 'over' : 'side'"
    [opened]="!homeLink.isActive && !(isSmallDevice$ | async)"
    [style.width.px]="250"
    #sidenav
  >
    <ng-container *ngFor="let link of menu">
      <a
        mat-button
        class="menu-item"
        [routerLink]="link.path"
        routerLinkActive="active-link"
        #routerLink="routerLinkActive"
      >
        <span class="d-flex align-items-center">
          {{ link.title }}
          <span class="spacer" [style.flex]="'1 1 auto'"></span>
          <mat-icon>{{ routerLink.isActive ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}</mat-icon>
        </span>
      </a>

      <ng-container *ngIf="routerLink.isActive">
        <ng-container *ngFor="let l of link.links">
          <span class="menu-subheader" *ngIf="!l.path">
            {{ l.title }}
          </span>
          <a
            class="menu-subitem"
            *ngIf="l.path"
            mat-button
            [routerLink]="l.path"
            [routerLinkActiveOptions]="{ exact: true }"
            routerLinkActive="active-link"
          >
            {{ l.title }}
          </a>
        </ng-container>
      </ng-container>
    </ng-container>
  </mat-sidenav>

  <router-outlet></router-outlet>
</mat-sidenav-container>

<ng-template #version>
  <button mat-button [matMenuTriggerFor]="menu">
    Next
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
  <mat-menu #menu="matMenu" yPosition="below" xPosition="before">
    <a disabled mat-menu-item>Next</a>
    <a href="https://formly.dev/" mat-menu-item>Latest</a>
  </mat-menu>
</ng-template>
